<template>
  <el-drawer
    :title="title"
    size="auto"
    :wrapperClosable="false"
    :visible.sync="isShow"
    direction="rtl"
    class="drawer-form drawer-permission"
    @close="closeDrawer"
    >
    <div class="drawer-body">
      <el-scrollbar style="height:100%">
        <el-tree
          :data="list"
          show-checkbox
          node-key="id"
          :default-expand-all="true"
          :default-checked-keys="checked"
          :props="defaultProps"
          @check="toggleCheck">
        </el-tree>
      </el-scrollbar>
    </div>
  </el-drawer>
</template>
<script>
export default {
  data(){
    return{
      isShow: false,
      btnLoading: false,
      title: null,
      row: null,
      list: [],
      checked:[],
      defaultProps: {
          children: 'children',
          label: 'name'
        }
    }
  },
  methods:{
    init(row){
      this.row = row;
      this.title = '修改'+row.user_id+'菜单权限';
      this.isShow = true;
      this.getAllMenu();
    },
    getAllMenu(){
      this.$request('get', '/menu/all_menus',{user_id: this.row.user_id}, (data,msg) => {
        let newData = data.map(item => {
          if(item.display_name == '用户管理' && this.row.memo != '管理员'){
            item.disabled = true;
          }
          return item;
        })
        let list = this.$util.getTreeList(newData, {id: 'menu_id', parentId: 'father_id', name: 'display_name'});
        this.list = list.sort((a,b) => {
          return a.menu_id - b.menu_id;
        });
        let singleArr = this.list.filter(item => !item.is_forbid && !item.hasOwnProperty('children'));
        let arr = newData.filter(item => !item.is_forbid && item.father_id > 0);
        let menuIds = singleArr.concat(arr);
        this.checked = menuIds.map(item => item.menu_id);
        this.$forceUpdate();
      });
    },
    closeDrawer(){
      this.checked = [];
    },
    toggleCheck(val){
      let params = {
        user_id: this.row.user_id,
        menu_id: val.menu_id,
        forbid: !val.is_forbid
      };
      this.$request('post', '/user/menu_user'+this.$util.serialize(params), {}, (data,msg) => {
        this.getAllMenu();
      })
    },
  }
}
</script>